<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="24">
        <!-- 搜索框 -->
        <el-col :span="5">
          <el-input v-model="listQuery.name" placeholder="请输入活动名称" clearable @change="searchActivity"></el-input>
        </el-col>
        <el-col  :span="16">
          <el-button type="primary" icon="el-icon-search" @click="searchActivity">搜索</el-button>
        </el-col>

        <el-col :span="3"  align="center" v-if="false">
          <el-button type="success" @click="handleAdd" class="add">增加活动</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.name" label="活动名称">活动名称</el-checkbox>
      <el-checkbox v-model="formThead.customer" label="所属用户">所属用户</el-checkbox>
      <el-checkbox v-model="formThead.store_id" label="所属店铺">所属店铺</el-checkbox>
      <el-checkbox v-model="formThead.allowed_total" label="名额总数">名额总数</el-checkbox>
      <el-checkbox v-model="formThead.purchase_course" label="购买课程数量">购买课程数量</el-checkbox>
      <el-checkbox v-model="formThead.give_course" label="赠送课程数量">赠送课程数量</el-checkbox>
      <el-checkbox v-model="formThead.active_status" label="活动状态">活动状态</el-checkbox>
      <el-checkbox v-model="formThead.participants" label="参加人数">参加人数</el-checkbox>
      <el-checkbox v-model="formThead.image" label="活动图片">活动图片</el-checkbox>
      <el-checkbox v-model="formThead.start_date" label="活动开始时间">活动开始时间</el-checkbox>
      <el-checkbox v-model="formThead.end_date" label="活动结束时间">活动结束时间</el-checkbox>
      <el-checkbox v-model="formThead.virtual_total" label="虚报名额">虚报名额</el-checkbox>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.operate_status" label="操作状态">操作状态</el-checkbox>
      <el-checkbox v-model="formThead.enable_auto_add_allowed_total" label="是否开启剩余20%自动增加金额">是否开启剩余20%自动增加金额</el-checkbox>
      <el-checkbox v-model="formThead.enablea_allowed_purchase_quantity" label="是否开启每人允许限购数量">是否开启每人允许限购数量</el-checkbox>
      <el-checkbox v-model="formThead.enable_purchase_course_then_give_course" label="是否开启买课程赠送课程">是否开启买课程赠送课程</el-checkbox>
      <el-checkbox v-model="formThead.course_msg" label="课程信息">课程信息</el-checkbox>
      <el-checkbox v-model="formThead.group_purchase" label="拼团情况">拼团情况</el-checkbox>
      <el-checkbox v-model="formThead.activity_order" label="活动订单">活动订单</el-checkbox>
      <el-checkbox v-model="formThead.activity_performance" label="活动业绩">活动业绩</el-checkbox>
      <el-checkbox v-model="formThead.status" label="系统状态">系统状态</el-checkbox>
    </div>
    <el-table :data="activityList" style="width: 98%;margin: 10px auto 0" border :key="activityList.length" class="table" v-loading="loading" element-loading-text="拼命加载中....">
      
      <el-table-column label="活动封面" align="center" v-if="formThead.image">
        <template slot-scope="{row}"  v-if="row.image.length>0">
          <img :src="row.image[0].image === ''? null: row.image[0].image" alt="暂无图片" @click="showActivityImage(row)"/>
        </template>
      </el-table-column>

      <el-table-column label="活动名称" align="center" width="300" v-if="formThead.name">
        <template slot-scope="{row}">
          <span class="active-name" :title="row.name">{{row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属用户" align="center" v-if="formThead.customer">
        <template slot-scope="{row}">
          <span  v-if="row.customer.length > 0">{{row.customer[0].nickname}}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属店铺" align="center" v-if="formThead.store_id">
        <template slot-scope="{row}">
          <span  v-if="row.store_info.length > 0">{{row.store_info[0].name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="名额总数" align="center" v-if="formThead.allowed_total">
        <template slot-scope="{row}">
          <span>{{row.allowed_total}}</span>
        </template>
      </el-table-column>

      <el-table-column label="购买课程数量" align="center" v-if="formThead.purchase_course">
        <template slot-scope="{row}">
          <span>{{row.purchase_course}}</span>
        </template>
      </el-table-column>

      <el-table-column label="参加人数" align="center" v-if="formThead.participants">
        <template slot-scope="{row}">
          <span>{{row.participants}}</span>
        </template>
      </el-table-column>

      <el-table-column label="活动状态" align="center" v-if="formThead.active_status">
        <template slot-scope="{row}">
          <span v-if="row.active_status === 0" style="color: #409EFF">未开始</span>
          <span v-else-if="row.active_status === 1" style="color: #2ac06d">进行中</span>
          <span v-else-if="row.active_status === 2" style="color: red">已结束</span>
          <span v-else style="color: #409EFF">未开始</span>
        </template>
      </el-table-column>

      <el-table-column label="活动开始时间" align="center" v-if="formThead.start_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.start_date}}</span>
        </template>
      </el-table-column>

      <el-table-column label="活动结束时间" align="center" v-if="formThead.end_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.end_date}}</span>
        </template>
      </el-table-column>

      <el-table-column label="虚报名额" align="center" v-if="formThead.virtual_total">
        <template slot-scope="{row}">
          <span>{{row.virtual_total}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作状态" align="center" v-if="formThead.operate_status">
        <template slot-scope="{row}">
          <span v-if="row.operate_status === 0" style="color: red">暂存</span>
          <span v-else-if="row.operate_status === 1" style="color: #2ac06d">发布</span>
        </template>
      </el-table-column>

      <el-table-column label="是否开启剩余20%自动增加金额" align="center" v-if="formThead.enable_auto_add_allowed_total">
        <template slot-scope="{row}">
          <span v-if="row.enable_auto_add_allowed_total === 0" style="color: red">否</span>
          <span v-else-if="row.enable_auto_add_allowed_total === 1" style="color: #2ac06d">是</span>
        </template>
      </el-table-column>

      <el-table-column label="是否开启每人允许限购数量" align="center" v-if="formThead.enablea_allowed_purchase_quantity">
        <template slot-scope="{row}">
          <span v-if="row.enablea_allowed_purchase_quantity === 0" style="color: red">否</span>
          <span v-else-if="row.enablea_allowed_purchase_quantity === 1" style="color: #2ac06d">是</span>
        </template>
      </el-table-column>

      <el-table-column label="是否开启买课程赠送课程" align="center" v-if="formThead.enable_purchase_course_then_give_course">
        <template slot-scope="{row}">
          <span v-if="row.enable_purchase_course_then_give_course === 0" style="color: red">否</span>
          <span v-else-if="row.enable_purchase_course_then_give_course === 1" style="color: #2ac06d">是</span>
        </template>
      </el-table-column>

      <el-table-column label="课程信息" align="center" v-if="formThead.course_msg">
        <template slot-scope="{row}">
          <i class="el-icon-view" @click="showCourse(row)"></i>
        </template>
      </el-table-column>

      <el-table-column label="拼团情况" align="center" v-if="formThead.group_purchase">
        <template slot-scope="{row}">
          <i class="el-icon-view" @click="showPurchase(row)"></i>
        </template>
      </el-table-column>

      <el-table-column label="活动订单" align="center" v-if="formThead.activity_order">
        <template slot-scope="{row}">
          <i class="el-icon-view" @click="showOrder(row)"></i>
        </template>
      </el-table-column>

      <el-table-column label="活动业绩" align="center" v-if="formThead.activity_performance">
        <template slot-scope="{row}">
          <i class="el-icon-view" @click="showPerformance(row)"></i>
        </template>
      </el-table-column>

      <el-table-column label="系统状态" align="center" v-if="formThead.status">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.bool_status"
            active-text="启用"
            inactive-text="停用"
            @change="changeStatus(row)">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleDetail(row.activity_id)">详情</el-button>
          <!-- 编辑活动 -->
          <el-button size="mini" type="primary" @click="handleEdit(row)" v-if="false">编辑</el-button>
          <el-button type="danger" @click="openDelete(row.activity_id)" size="mini">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,15,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <add-activity ref="showAddDialog"/>
    <edit-activity ref="showEditDialog"/>
    <activity-detail class="activity-detail" ref="showDetailDialog"/>
    <activity-image ref="showActivityImageDialog" />
    <activity-course ref="showActivityCourseDialog"/>
    <activity-group-purchase ref="showActivityGroupPurchaseDialog"/>
    <activity-performance ref="showActivityPerformance"/>
    <activity-order ref="showActivityOrder"/>

  </div>
</template>

<script>
  import store from '@/store'
  import {list, del, edit} from '@/api/thk/activity'
  import {list as getCustomerList} from '@/api/thk/customer'
  import {list as getStoreList} from '@/api/thk/store'
  import {getActivityPerformance} from '@/api/thk/performance'

  import addActivity from './add'
  import editActivity from './edit'
  import activityDetail from './detail'
  import activityImage from './activityImage'
  import activityCourse from './activityCourse'
  import activityGroupPurchase from './activityGroupPurchase'
  import activityPerformance from './activityPerformance'
  import activityOrder from './activityOrder'


  export default {
    name: 'activity',
    components: {
      activityDetail,
      addActivity,
      editActivity,
      activityImage,
      activityCourse,
      activityGroupPurchase,
      activityPerformance,
      activityOrder
    },
    data() {
      return {
        // save storeList field
        activityList: [],
        bigImageSrc: null,

        customerList: [],
        storeList: [],

        formThead: {
          name: true,
          customer: true,
          store_id: true,
          start_date: false,
          end_date: false,
          allowed_total: true,
          purchase_course: true,
          give_course: true,
          active_status: true,
          status: true,
          participants: true,
          virtual_total: false,
          image: true,
          operate_status: false,
          enable_auto_add_allowed_total: false,
          enablea_allowed_purchase_quantity: false,
          enable_purchase_course_then_give_course: false,
          course_msg: false,
          group_purchase: false,
          activity_performance: false,
          activity_order: false,
        },

        listQuery: {
          name: undefined,
          detail:undefined,
          page: 1,
          pagesize: 10
        },

        loading: true,
        total: 0

      }
    },

    // created生命周期中调用获取活动列表方法
    created() {

      this.getActivityList()
      this.getCustomerList()
      this.getStoreList()

    },

    updated() {
      this.$nextTick(function(){
        this.loading = false
      })
    },

    methods: {

      // 获取活动列表
      getActivityList(){
        list(store.getters.token, this.listQuery).then(res =>{
          this.activityList = res.data.list.data

          // 添加字段,设置活动系统状态的开启与关闭
          for(let i=0; i<this.activityList.length; i++){
            if(this.activityList[i].status === 1){
              this.activityList[i].bool_status = true
            }else{
              this.activityList[i].bool_status = false
            }
          }

          this.total = res.data.list.total
          console.log('>>>>>>>> activityList >>>>>>>')
          console.log(this.activityList)
        },error => {
          console.log(error)
        })
      },

      // 弹出add对话框,args为增加时需要的数据
      handleAdd(){
        this.$refs.showAddDialog.cancelSubmit(this.customerList, this.storeList)
      },

      // 删除Activity
      handleDelete(activity_id){
        del(store.getters.token, activity_id).then(res => {
          // 删除之后，需要重新渲染.重新查询数据，会根据数据的length重新渲染
          this.getActivityList()
          console.log("删除成功!",res)
        }).catch(err => {
          console.log("删除失败",err)
        })
      },

      // 弹出编辑对话框
      handleEdit(row){
        this.$refs.showEditDialog.showEditDialog(row, this.customerList, this.storeList)
      },

      // 跳转到详情页面
      handleDetail(row){

        this.$refs.showDetailDialog.showDetailDialog(row)
        
      },

      // 弹出是否删除对话框, then中调用handleDelete
      openDelete(activity_id) {
        this.$confirm('此操作将会删除问题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(activity_id)
          this.$message({
            type: 'success',
            message: '删除成功!'

          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },


      // 获取用户列表
      getCustomerList(){
        getCustomerList(store.getters.token).then(res=>{
          this.customerList = res.data.list.data
        }).then(err => {
          console.log(err)
        })
      },

      // 获取店铺列表
      getStoreList(){
        getStoreList(store.getters.token).then(res =>{
          this.storeList = res.data.list.data
        },error => {
          console.log(error)
        })
      },

      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getActivityList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getActivityList()
      },

      // 搜索功能
      searchActivity(){
        this.getActivityList()
      },

      // 改变系统状态
      changeStatus(row){
        this.loading = true
        // 1.封装数据
        let data = {}
        if(row.bool_status === true){
          data.status = '1'
        }else{
          data.status = '0'
        }
        data.activity_id = row.activity_id

        // 2.发送请求
        edit(store.getters.token,data).then(res=>{
          this.loading = true
          this.$message({type:"success", message: "修改成功!"})
          this.getActivityList()
          //
          console.log(data)
          this.loading = false
        }).catch(err=>{
          console.log(err)
        })
      },

      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },

      // 显示活动图片,轮播图
      showActivityImage(row){
        if(row.image.length === 0){
          this.$message("此活动尚未上传图片!")
        }else{
          this.$refs.showActivityImageDialog.showActiveImage(row.image)
        }
      },

      showCourse(row){
        if(row.course_msg.length === 0){
          this.$message("此活动暂无课程信息!")
        }else{
          console.log(row.course_msg)
          this.$refs.showActivityCourseDialog.showActiveCourse(row.course_msg)
        }
      },

      showPurchase(row){
        if(row.group_purchase.length === 0){
          this.$message("暂无拼团情况!")
        }else{
          this.$refs.showActivityGroupPurchaseDialog.showActivePurchase(row.group_purchase)
        }
      },

      showPerformance(row){
        // 发送请求获取活动业绩的数据
        this.$refs.showActivityPerformance.showActivityPerformance(row.activity_id)
      },

      // 活动订单
      showOrder(row){
        this.$refs.showActivityOrder.showActiveOrder(row.activity_id)
      },
      shuchu(row){
        console.log("123",row);
      }
    }
  }
</script>

<style scoped>
  .filter-container{
    margin: 10px 0 -9px 20px;
  }
  .add{
    position: relative;
    left: 20px;
    top: 35px;
  }
  .active-name{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .activity-detail{

  }

  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }

  img{
    height: 50px;
    width: 65px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
  }

  i::before{
    /*display: inline-block;*/
    font-size: 20px;
    height: 18px;
    width: 18px;
  }

  i:hover{
    color: #409EFF;
  }

</style>

